import React, { useState } from 'react';
import Card from '../Card';

const Container = () => {
  const [cards, setCards] = useState<any[]>([
    { id: 'card1', text: '卡片1' },
    { id: 'card2', text: '卡片2' },
    { id: 'card3', text: '卡片3' },
  ]);

  const moveCard = (dargIndex: number, hoverIndex: number) => {
    const dragCard = cards[dargIndex];
    let cloneCards = [...cards];
    cloneCards.splice(dargIndex, 1);
    cloneCards.splice(hoverIndex, 0, dragCard);
    setCards(cloneCards);
  };

  return (
    <div>
      {cards.map((item, index) => {
        return (
          <Card
            key={item.id}
            text={item.id}
            index={index}
            id={item.id}
            moveCard={moveCard}
          ></Card>
        );
      })}
    </div>
  );
};

export default Container;
